<template>
	<view>
		<view class="head">
			<view class="head_left" @tap="back()">
				<image src="../../../static/wode/return.png" mode=""></image>
				<text>发现</text>
			</view>
		</view>
		<view class="padding-box">
			<uni-Swiper-Dot :info="info" :current="current" field="content" :mode="'default'">
				<swiper class="swiper-box" @change="change">
					<!-- autoplay="true" -->
					<swiper-item v-for="(item ,index) in info" :key="index">
						<view class="swiper-item">
							<image src="../../../static/avatar.jpg" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-Swiper-Dot>
		</view>
		<view class="margin-box">
			<view class="menu_box">
				<view class="menu_item" v-for="(item,index) in menuList" :key="index" @tap="toUserList(item.text)">
					<image :src="item.url" mode=""></image>
					<text>{{item.text}}</text>
				</view>
			</view>
			<view class="picBox">
				<view class="picBox_item">
					<image class="join" src="../../../static/jingyu/join.png" mode=""></image>
					<image class="tiyan" src="../../../static/jingyu/tiyan.png" mode=""></image>
				</view>
				<view class="picBox_item">
					<image class="Strategy" src="http://img.curiousmore.com/tmp/wx2f4eaeb7b745ba4e.o6zAJs2bel8UMMafp-gtnT7OfHzo.N2GYcmEFbwzJa5e4c8a361d352bae73e497199fefd90.png" mode=""></image>
					<image class="manual" src="../../../static/jingyu/manual.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="margin-box">
			<view class="videoBox">
				<view class="vider_top">
					<text>母语助学师</text>
					<view class="vider_top_right">
						<text>查看更多</text>
						<image src="../../../static/right.png" mode=""></image>
					</view>
				</view>
				<view class="video_bottom">
					<video src="" controls></video>
					<view class="language">
						英语
					</view>
				</view>

			</view>
		</view>
		<view class="margin-box">
			<view class="videoBox">
				<view class="vider_top">
					<text>推荐助学师</text>
					<view class="vider_top_right">
						<text>查看更多</text>
						<image src="../../../static/right.png" mode=""></image>
					</view>
				</view>
				<view class="video_bottom2">
					<view class="video_left_box">
						<video class="video_left" src="" controls></video>
						<view class="message_box">
							<view class="name_box">
								<text class="hideText">Lucas</text>
								<view class="shenfen">
									跨境助学师
								</view>
							</view>
							<text class="text1">累计学生 200人</text>
							<view class="score_box">
								<uni-rate disabled="true" size="14" value="4.0"></uni-rate>
								<text>4.0</text>
							</view>
						</view>
					</view>
					<view class="video_right_box">
						<video class="video_right" src="" controls></video>
						<view class="message_box">
							<view class="name_box ">
								<text class="hideText">Lucas</text>
								<view class="shenfen">
									跨境助学师
								</view>
							</view>
							<text class="text1">累计学生 200人</text>
							<view class="score_box">
								<uni-rate disabled="true" size="14" value="4.0"></uni-rate>
								<text>4.0</text>
							</view>

						</view>
					</view>

				</view>
			</view>
		</view>
		<view class="margin-box">
			<view class="videoBox">
				<view class="vider_top">
					<text>专业助学师</text>
					<view class="vider_top_right">
						<text>查看更多</text>
						<image src="../../../static/right.png" mode=""></image>
					</view>
				</view>
				<view class="flex_box">
					<video class="video_left" src="" controls></video>
					<view class="message_box margin-box2">

						<text class="hideText">Lucas</text>
						<view class="">
							<view class="shenfen">
								跨境助学师
							</view>
						</view>

						<text class="text1">累计学生 200人</text>
						<view class="score_box">
							<uni-rate disabled="true" size="14" value="4.0"></uni-rate>
							<text>4.0</text>
						</view>

					</view>
				</view>
				<view class="flex_box">
					<video class="video_left" src="" controls></video>
					<view class="message_box margin-box2">

						<text class="hideText">Lucas</text>
						<view class="">
							<view class="shenfen">
								跨境助学师
							</view>
						</view>

						<text class="text1">累计学生 200人</text>
						<view class="score_box">
							<uni-rate disabled="true" size="14" value="4.0"></uni-rate>
							<text>4.0</text>
						</view>

					</view>
				</view>
			</view>

		</view>
		<view class="margin-box">
			<view class="videoBox">
				<view class="vider_top">
					<text>跨境助学师</text>
					<view class="vider_top_right">
						<text>查看更多</text>
						<image src="../../../static/right.png" mode=""></image>
					</view>
				</view>
				<view class="video_bottom">
					<video src="" controls></video>
					<view class="language">
						英语
					</view>
					<text class="masterLanguage">掌握语言：英语(母语)、汉语、阿拉伯语</text>
				</view>
				<view class="video_bottom">
					<video src="" controls></video>
					<view class="language">
						英语
					</view>
					<text class="masterLanguage">掌握语言：英语(母语)、汉语、阿拉伯语</text>
				</view>
				<view class="video_bottom">
					<video src="" controls></video>
					<view class="language">
						英语
					</view>
					<text class="masterLanguage">掌握语言：英语(母语)、汉语、阿拉伯语</text>
				</view>
			</view>
		</view>
		<view class="margin-box">
			<view class="title">
				优秀评论
			</view>
			<view class="commentBox">
				<view class="comment_item">
					<view class="comment_title">
						<text>《聊聊历史》</text>
						<text>5月6日</text>
						<text>08：00-08：30</text>
					</view>
					<view class="comment_body">
						<image class="headImg" src="../../../static/avatar.jpg" mode=""></image>
						<view class="comment_right">
							<view class="comment_name">
								<text>用户名</text>
								<text>2019.06.25</text>
							</view>
							<view class="score_box">
								<uni-rate disabled="true" size="13" value="4.0"></uni-rate>
								<text>4.0</text>
							</view>
							<view class="comment_text">
								讲的不错，讲的不错讲的讲的不错，讲的不错讲的讲的不错，讲的不错讲的讲的不错，讲的不错讲的讲的不错，讲的不错讲的
							</view>
						</view>
					</view>
				</view>
				<view class="comment_item">
					<view class="comment_title">
						<text>《聊聊历史》</text>
						<text>5月6日</text>
						<text>08：00-08：30</text>
					</view>
					<view class="comment_body">
						<image class="headImg" src="../../../static/avatar.jpg" mode=""></image>
						<view class="comment_right">
							<view class="comment_name">
								<text>用户名</text>
								<text>2019.06.25</text>
							</view>
							<view class="score_box">
								<uni-rate disabled="true" size="13" value="4.0"></uni-rate>
								<text>4.0</text>
							</view>
							<view class="comment_text">
								讲的不错，讲的不错讲的讲的不错，讲的不错讲的讲的不错，讲的不错讲的讲的不错，讲的不错讲的讲的不错，讲的不错讲的
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniSwiperDot from "../../../components/uni-swiper-dot.vue"
	import uniRate from "@/components/uni-rate/uni-rate.vue"
	import uniIcon from "@/components/uni-icon/uni-icon.vue"
	export default {
		components: {
			uniSwiperDot,
			uniRate,
			uniIcon
		},
		data() {
			return {
				info: [{
						content: 1
					},
					{
						content: 2
					},
					{
						content: 3
					}
				],
				current: 0,
				mode: 'default',
				menuList: [{
						url: '/static/jingyu/fenlei.png',
						text: '语言分类'
					},
					{
						url: '/static/jingyu/zhuanye.png',
						text: '专业助学师'
					},
					{
						url: '/static/jingyu/kuajing.png',
						text: '跨境助学师'
					},
					{
						url: '/static/jingyu/muyu.png',
						text: '母语助学师'
					},
					{
						url: '/static/jingyu/sijiao.png',
						text: '私教'
					}
				]
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			change(e) {
				this.current = e.detail.current;
			},
			toUserList(type) {
				var search_type = 'master'
				if (type == '语言分类') {
					var language_type = true
					var condition = ''
				} else {
					var condition = type
				}
				if (language_type == true) {
					uni.navigateTo({
						url: '../../../pages/Meet/userList/userList?search_type=' + search_type + '&condition=' + type +
							'&language_type=true'
					})
				} else {
					uni.navigateTo({
						url: '../../../pages/Meet/userList/userList?search_type=' + search_type + '&condition=' + type
					})
				}

			},
		}
	}
</script>

<style scoped>
	.head {
		height: 128upx;
		display: flex;
		justify-content: space-between;
		font-size: 32upx;
		padding: 0 24upx;
		background: #ffffff;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 9999;
	}

	.head image {
		height: 36upx;
		width: 20upx;
		margin-right: 9upx;
	}

	.head_left {
		display: flex;
		align-items: center;
		color: #666666;
	}

	.padding-box {
		padding-top: 148upx;
	}

	.swiper-item {
		text-align: center;
		line-height: 100%;
	}

	.swiper-item image {
		width: 710upx;
		height: 250upx;
		border-radius: 10upx;
		box-shadow: 0px 2px 2px 2px rgba(70, 206, 207, 0.3);
		margin-top: 20upx;
	}

	.margin-box {
		margin-top: 20upx;
		background: #FFFFFF;

	}

	.menu_box {
		display: flex;
		justify-content: space-around;
		padding-top: 30upx;
	}

	.menu_item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.menu_item image {
		width: 88upx;
		height: 88upx;
		margin-bottom: 20upx;
	}

	.menu_item text {
		font-size: 24upx;
		color: #999999;
	}

	.picBox {
		display: flex;
		flex-direction: column;
		padding: 50upx 28upx 40upx 28upx;
	}

	.picBox_item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20upx;
	}

	.join {
		width: 450upx;
		height: 185upx;
	}

	.tiyan {
		width: 225upx;
		height: 185upx;
	}

	.Strategy,
	.manual {
		width: 340upx;
		height: 185upx;
	}

	.videoBox {
		padding: 30upx 25upx 40upx 25upx;
		display: flex;
		flex-direction: column;
	}

	.language {
		position: absolute;
		background: #46CECF;
		font-size: 28upx;
		color: #FFFFFF;
		text-align: center;
		padding: 4upx 6upx;
		right: 24upx;
		top: 44upx;
		border-radius: 6upx;
		z-index: 8000;
	}

	.vider_top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #333333;
		font-size: 36upx;
		font-weight: bold;
	}

	.vider_top_right {
		display: flex;
		align-items: center;
		color: #999999;
		font-size: 24upx;
		font-weight: 100;
	}

	.vider_top_right image {
		width: 16upx;
		height: 28upx;
		margin-left: 10upx;
	}

	.video_bottom {
		position: relative;
	}

	.video_bottom video {
		width: 700upx;
		height: 415upx;
		border-radius: 20upx;
		margin-top: 20upx;
	}

	.video_bottom2 {
		display: flex;
		justify-content: space-between;
		position: relative;
	}

	.video_left_box {
		width: 420upx;
	}

	.video_left {
		margin-top: 20upx;
		width: 420upx;
		height: 260upx;
		border-radius: 20upx;

	}

	.video_right_box {
		width: 260upx;
	}

	.video_right {
		margin-top: 20upx;
		width: 260upx;
		height: 260upx;
		border-radius: 20upx;
	}

	.name_box {
		display: flex;
		align-items: center;
		color: #000000;
		font-size: 30upx;

	}

	.hideText {
		max-width: 115upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-right: 18upx;
		font-weight: bold;
		color: #000000;
		font-size: 30upx;
	}

	.message_box {
		display: flex;
		flex-direction: column;
	}

	.shenfen {
		color: #32CCCC;
		font-size: 18upx;
		border: 1upx solid #32CCCC;
		height: 24upx;
		line-height: 24upx;
		padding: 0 6upx;
		max-width: 90upx;
		text-align: center;
	}

	.text1 {
		color: #999999;
		font-size: 22upx;
		margin: 10upx 0;
	}

	.score_box {
		display: flex;
		align-items: center;
		color: #FCC732;
		font-size: 24upx;
	}

	.score_box text {
		margin-left: 20upx;
	}

	.flex_box {
		display: flex;
	}

	.margin-box2 {
		margin-top: 20upx;
		margin-left: 20upx;
	}

	.masterLanguage {
		position: absolute;
		color: #FFFFFF;
		font-size: 28upx;
		bottom: 68upx;
		left: 22upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 470upx;
	}

	.title {
		color: #333333;
		font-size: 36upx;
		font-weight: bold;
		line-height: 84upx;
		border-bottom: 1upx solid #E6E6E6;
		padding: 0 24upx;
	}

	.comment_item {
		padding: 0 24upx;
		border-bottom: 1upx solid #E6E6E6;
	}

	.comment_title {
		display: flex;
		color: #333333;
		font-size: 28upx;
		font-weight: bold;
		margin-top: 34upx;
	}

	.comment_title text {
		margin-right: 20upx;
	}

	.comment_body {
		display: flex;
		padding: 25upx 0;
	}

	.headImg {
		width: 40upx;
		height: 40upx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 10upx;
	}

	.comment_right {
		display: flex;
		flex-direction: column;
		width: 570upx;
	}

	.comment_name {
		color: #999999;
		font-size: 20upx;
	}

	.comment_name text {
		margin-right: 20upx;
	}

	.comment_text {
		color: #333333;
		font-size: 26upx;
		margin-top: 10upx;
	}
</style>
